<template>
  <view class="container">
    <view class="header-bar">
      <!-- 头部导航 -->
      <wk-nav-bar
        :command-list="commandList"
        :title="typeObj.label"
        @command="handleCommand" />
		
      <view class="content">
        <!-- Tab 切换 -->
        <view v-if="type == 1" class="tabs">
          <view
            v-for="(tab, index) in tabs1"
            :key="index"
            :class="['tab', activeTab === index ? 'active' : '']"
            @click="switchTab(index)"
          >
            {{ tab }}
          </view>
        </view>
			
        <!-- Tab 切换 -->
        <view v-if="type == 3" class="tabs">
          <view
            v-for="(tab, index) in tabs2"
            :key="index"
            :class="['tab', activeTab === index ? 'active' : '']"
            @click="switchTab(index)"
          >
            {{ tab }}
          </view>
        </view>
      </view>
    </view>
		
    <view class="content">
      <!-- 查询中内容 -->
      <view v-if="type == 4 || type == 2">
        <scroll-view :scroll-y="true" direction="vertical" :style="{height: pageHeight+'px'}">
          <view v-for="(item, index) in queryingList3" :key="index" class="list-item" @click="submit(item.id)">
            <view class="list-header">
              <text v-if="type == 4" class="name">
                {{ item.title }}
              </text>
              <text v-else-if="type == 2" class="name">
                关于"{{ item.orderTitle }}"的中标公告
              </text>
              <text class="status">
                {{ item.createTime }}
              </text>
            </view>
          </view>
        </scroll-view>
      </view>
	  
	
      <!-- Tab 内容 -->
 
    
      
      <!-- 采购寻源 -->
      <!-- 询价中内容 -->
      <view v-if="type == 1">
        <scroll-view v-if="activeTab === 0" :scroll-y="true" direction="vertical" :style="{height: pageHeight+'px'}">
          <view v-for="(item, index) in queryingList1" :key="index" class="list-item" @click="submit(item.id)">
            <view class="list-header">
              <text class="name">
                {{ item.title || item.orderTitle }}
              </text>
              <text class="status">
                {{ item.createTime }}
              </text>
            </view>
          </view>
        </scroll-view>
        <!-- 已完成内容 -->
        <scroll-view v-else :scroll-y="true" direction="vertical" :style="{height: pageHeight+'px'}">
          <view v-for="(item, index) in queryingList2" :key="index" class="list-item" @click="submit(item.id)">
            <view class="list-header">
              <text class="name">
                {{ item.title || item.orderTitle }}
              </text>
              <text class="status">
                {{ item.createTime }}
              </text>
            </view>
            <view class="list-body">
              <text class="description">
                {{ item.description }}
              </text>
            </view>
            <view class="list-footer">
              <text class="date">
                {{ item.date }}
              </text>
            </view>
          </view>
        </scroll-view>
      </view>
      <!-- 我的待办 -->
      <view v-if="type == 3">
        <scroll-view v-if="activeTab === 1" :scroll-y="true" direction="vertical" :style="{height: pageHeight+'px'}">
          <view
            v-for="(item, index) in queryingList1" :key="index" class="list-item" 
            @click="goToPage(item.objId,'/pages/inqueryDetail/inqueryDetail')">
            <view class="list-header">
              <text class="name">
                {{ item.title || item.orderTitle }}
              </text>
              <text class="status">
                {{ item.createTime }}
              </text>
            </view>
          </view>
        </scroll-view>
        <!-- 已完成内容 -->
        <scroll-view v-else-if="activeTab === 2" :scroll-y="true" direction="vertical" :style="{height: pageHeight+'px'}">
          <view
            v-for="(item, index) in queryingList1" :key="index" class="list-item" 
            @click="goToPage(item.objId,'/pages/inqueryDetail/inqueryDetail')">
            <view class="list-header">
              <text class="name">
                {{ item.title || item.orderTitle }}
              </text>
              <text class="status">
                {{ item.createTime }}
              </text>
            </view>
            <view class="list-body">
              <text class="description">
                {{ item.description }}
              </text>
            </view>
            <view class="list-footer">
              <text class="date">
                {{ item.date }}
              </text>
            </view>
          </view>
        </scroll-view>
        <scroll-view v-else :scroll-y="true" direction="vertical" :style="{height: pageHeight+'px'}">
          <view
            v-for="(item, index) in queryingList1" :key="index" class="list-item" 
            @click="goToPage(item.objId,'/pages/inqueryDetail/inqueryDetail')">
            <view class="list-header">
              <text class="name">
                {{ item.title || item.orderTitle }}
              </text>
              <text class="status">
                {{ item.createTime }}
              </text>
            </view>
          </view>
        </scroll-view>
      </view>
      <!-- TODO 分页 -->
      <uni-pagination :style="{height: '50px'}" :total="page.total" :page-size="15" :current="page.current" title="标题文字" @change="changePage" />
    </view>
    <!-- <view class="uni-app">
    <view class="status-bar" />
    <view class="main-container">
      <wk-nav-bar
        :command-list="commandList"
        :title="typeObj.label"
        @command="handleCommand" />

      <wk-scroll-view
        :status="listStatus"
        class="list-scroll"
        @refresh="getList(true)"
        @loadmore="getList()">
        当显示企业公告，显示的页面
        <template v-if="type === 4">
          <notice-item
            v-for="(item, index) in listData"
            :key="item.id" 
            :item-data="item"
            :type="type"
            @delete="deleteOne(index)" />
        </template>
        当显示采购寻源，显示的页面
        <template v-else-if="type === 1">
          <view class="tabs">
            <view
              v-for="(tab, index) in tabs"
              :key="index"
              :class="['tab', activeTab === index ? 'active' : '']"
              @click="switchTab(index)"
            >
              {{ tab }}
            </view>
          </view>
        </template>
        当显示中标公告，显示的页面
        <template v-else-if="type === 2">
          <message-item
            v-for="(item, index) in listData"
            :key="item.messageId"
            :item-data="item"
            :type="type"
            @read="handlerRead(index)"
            @delete="deleteOne(index)" />
        </template>
        当显示我的代办，显示的页面
        <template v-else-if="type === 3">
          <purchase-item />
        </template>
      </wk-scroll-view>
    </view>
	
	
    <view class="content">
      <view v-if="activeTab === 0">
        dsad
      </view>
      <view v-else>
        已完成内容
      </view>
    </view>

    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog
        :content="dialogMsg"
        :duration="2000"
        type="warning"
        @confirm="deleteAllRead" />
    </uni-popup>
  </view> -->
  </view>
  </view>
</template>

<script>
  import UniPagination from '@/components/uni-pagination/uni-pagination.vue'
  import { getNoticeList, xunyuanAnnouncementList, zhongbiaoAnnouncementList, getsysMessageList} from 'API/notice';
  import {
    QueryMessageList,
    ReadAllMessage,
    MessageClear,
    MessageDeleteById,
  } from 'API/admin'

  import MessageItem from './message/messageItem.vue'
  import NoticeItem from './message/noticeItem.vue'
  import PurchaseItem from './message/purchaseItem.vue'

  import mainListMixins from '@/mixins/mainList.js'
  import config from './message.js'

  export default {
    name: 'MessageDetail',
    components: {
      UniPagination
      // MessageItem,
      // NoticeItem,
      // PurchaseItem
    },
    mixins: [mainListMixins],
    data() {
      return {
        page: {
          total: 50,
          pageSize: 15,
          current: 1
        },
        headerBarHeight: 0,
        pageHeight: 0,
        // 导航栏数据
        commandList: [],
        typeObj: { label: '详情' },	        
        // 查询中的数据
        queryingList1: [],	
        queryingList2: [],
        queryingList3: [],
        listData: [],
        tabs1: ['询价中', '已完成'], // Tab 名称
        tabs2: ['全部', '已读', '未读'],
        activeTab: 0, // 当前激活的 Tab 索引
        type: null,
        // commandList: [
        //   {
        //     label: '全部已读',
        //     imgIcon: 'dealStatus',
        //     value: 'readAll'
        //   },
        //   {
        //     label: '删除已读',
        //     imgIcon: 'delete',
        //     value: 'delete'
        //   }
        // ],

        dialogMsg: ''
      }
    },
    computed: {
      params() {
        return {
          page: this.page.current,
          limit: 15
        }
      }
      /* typeObj() {
        if (!this.type) return {}
        return config.typeList.find(o => o.value === this.type) || {}
      } */
    },
    mounted() {
      // 设置message list页面高度
      this.$nextTick(() => {
        let infos = uni
          .createSelectorQuery()
          .in(this)
          .select('.header-bar');
        infos
          .boundingClientRect(data => {
            this.headerBarHeight = data.height;
            let sysInfo = uni.getSystemInfoSync();
            // padding20px,分页50
            this.pageHeight = sysInfo.windowHeight - data.height - 20 - 50;
          })
          .exec();
      });
      // 监听窗口大小的变化
      uni.onWindowResize((res) => {
        console.log('ressss', res)
        this.pageHeight = res.size.windowHeight;
      });
    },
    onLoad(options) {
      this.type = Number(options.type)
      this.updatePageParams()
      this.getList()
    },
    methods: {
      changePage(e) {
        // e.type = 'prev'/'next'
        this.params.page = e.current;
        this.getList()
      }, 
      // 切换 Tab
      switchTab(index) {
        this.activeTab = index;
        this.updatePageParams()
        this.getList()
      },
      // 导航栏命令处理
      handleCommand(command) {
        console.log('Command:', command);
      },
	  
      updatePageParams() {
        // this.listStatus = 'loading'; // Set status to loading
        this.page.current = 1; // Reset to the first page if refreshing
        // this.listParams.page++; // ???Increment the page number
      }, 
	  
      getList() {
        if (this.type == 1) {
          if (this.activeTab == 0) {
            // 询价中
            xunyuanAnnouncementList({
				...this.params,
				objMap: {
					keyWord: '',
					status: this.activeTab,
				}
            }).then(res => {
              this.queryingList1 = res.data
              this.page.total = res.pageInfo.count
              this.page.current = res.pageInfo.page
            }).catch(() => {
              this.listStatus = 'more'
            })
          }else if (this.activeTab == 1) {
            // 询价中
            xunyuanAnnouncementList({
				...this.params,
				objMap: {
					keyWord: '',
					status: this.activeTab,
				}
            }).then(res => {
              this.queryingList2 = res.data
              this.page.total = res.pageInfo.count
              this.page.current = res.pageInfo.page
            }).catch(() => {
              this.listStatus = 'more'
            })
          }
        } else if (this.type == 4) {
          getNoticeList({
				...this.params,
          }).then(res => {
            this.queryingList3 = res.data
            this.page.total = res.pageInfo.count
            this.page.current = res.pageInfo.page
          }).catch(() => {
            this.listStatus = 'more'
          })
        } else if (this.type == 2) {
          zhongbiaoAnnouncementList({
				...this.params,
          }).then(res => {
            this.queryingList3 = res.data
            this.page.total = res.pageInfo.count
            this.page.current = res.pageInfo.page
          }).catch(() => {
            this.listStatus = 'more'
          })
        } else if (this.type == 3) {
          if (this.activeTab == 0) {
            getsysMessageList({
				...this.params,
				objMap: {readed: null}
            }).then(res => {
              this.queryingList1 = res.data
              this.page.total = res.pageInfo.count
              this.page.current = res.pageInfo.page
            }).catch(() => {
              this.listStatus = 'more'
            })
          } else if (this.activeTab == 1) {
            getsysMessageList({
				...this.params,
			    objMap: {readed: '0'}
            }).then(res => {
              this.queryingList1 = res.data
              this.page.total = res.pageInfo.count
              this.page.current = res.pageInfo.page
            }).catch(() => {
              this.listStatus = 'more'
            })
          } else if (this.activeTab == 2) {
            getsysMessageList({
				...this.params,
			    objMap: {readed: '1'}
            }).then(res => {
              this.queryingList1 = res.data
              this.page.total = res.pageInfo.count
              this.page.current = res.pageInfo.page
            }).catch(() => {
              this.listStatus = 'more'
            })
          }
        }
      },
	  
	  
	  
	  
      submit(id) {
        console.log('this.type', this.type)
        // console.log('this.id',this.id)
        // console.log('this.id',this.item.id)
        this.$Router.navigateTo({
          url: '/pages_oa/notice/detail',
          query: {
            id: id,
            type: this.type
          }
        })
      },
      goToPage(objId, url) {
        this.$Router.navigateTo({
          url: url,
          query: {
            objId: objId,
            type: this.type
          }
        })
      }
    },
     
   
	   


  }
  
</script>

<style scoped lang="scss">
	/* .container {
	  display: flex;
	  flex-direction: column;
	  height: 100%;
	} */
	/* Tab 样式 */
	.tabs {
		margin-top: 10rpx;
	  display: flex;
	  background-color: #f5f5f5;
	}
	
	.tab {
	  flex: 1;
	  text-align: center;
	  padding: 10rpx 0;
	  color: #333;
	  font-size: 14px;
	  border-bottom: 2px solid transparent;
	}
	
	.tab.active {
	  color: #fff;
	  background-color: #007aff; /* 蓝色背景 */
	  border-bottom-color: #007aff;
	}
	
	/* 内容区域 */
	.content {
	  flex: 1;
	  padding: 20rpx;
	}
	
	/* 列表样式 */
	.list-item {
	  background: #fff;
	  margin-bottom: 10px;
	  padding: 10px;
	  border-radius: 8px;
	  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}
	
	.list-header {
	  display: flex;
	  justify-content: space-between;
	  margin-bottom: 5px;
	}
	
	.name {
	  font-size: 16px;
	  font-weight: bold;
	}
	
	.status {
	  color: #09bb07;
	}
	
	.list-body {
	  margin-bottom: 5px;
	  font-size: 14px;
	  color: #666;
	}
	
	.list-footer {
	  font-size: 12px;
	  color: #999;
	}
</style>
